<template>
  <div id="app" :style="cssVars">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";
import { getUserProfile } from "@/api/system/user";
import Cookies from "js-cookie";
export default {
  name: "App",
  components: { ThemePicker },
  data() {
    return {
      user: {},
      backgroundImg: '',
      buttonShape: {
        borderColor: '#b3d8ff',
        borderRadius: '4px',
        paddingSpace: '10px 6px',
        borderLeft: 'auto',
        borderBottom: 'auto',
        borderRight: 'auto',
        borderTop: 'auto',
        width: 'auto',
        height: 'auto',
        maxWidth: '100%',
        maxHeight: '100%',
        margin: 'auto 3px',
        outline: 'none',
        whiteSpace: 'nowrap',
        textAlign: 'center'
      }
    };
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  },
  created() {
    let buttonShape = Cookies.get('buttonShape')
    if (buttonShape) {
      this.buttonShape = JSON.parse(buttonShape)
    }

  },
  computed: {
    cssVars() {
      return {
        '--borderRadius': this.buttonShape.borderRadius,
        '--borderColor': this.buttonShape.borderColor,
        '--paddingSpace': this.buttonShape.paddingSpace,
        '--borderLeft': this.buttonShape.borderLeft,
        '--borderBottom': this.buttonShape.borderBottom,
        '--borderRight': this.buttonShape.borderRight,
        '--borderTop': this.buttonShape.borderTop,
        '--width': this.buttonShape.width,
        '--height': this.buttonShape.height,
        '--margin': this.buttonShape.margin,
        '--outline': this.buttonShape.outline,
        '--whiteSpace': this.buttonShape.whiteSpace,
        '--textAlign': this.buttonShape.textAlign,
        '--maxWidth': this.buttonShape.maxWidth,
        '--maxHeight': this.buttonShape.maxHeight
      }
    }
  }
};
</script>
<style>
#app .theme-picker {
  display: none;
}

.el-button {

  border-radius: var(--borderRadius) !important;
  border-color: var(--borderColor) !important;
  padding: var(--paddingSpace) !important;
  border-left: var(--borderLeft) !important;
  border-bottom: var(--borderBottom) !important;
  border-right: var(--borderRight) !important;
  border-top: var(--borderTop) !important;
  width: var(--width) !important;
  height: var(--height) !important;
  max-width: var(--maxWidth) !important;
  max-height: var(--maxHeight) !important;
  margin: var(--margin) !important;
  outline: var(--outline) !important;
  white-space: var(--whiteSpace) !important;
  text-align: var(--textAlign) !important;

}
</style>
